import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Card, Button } from 'antd-mobile'

import {  Dialog,  Divider } from 'antd-mobile'


function Indexx() {
    let nav=useNavigate()
   
  return (
    <div style={{backgroundColor:'#f2f2f2'}}>
       <NavBar onBack={()=>nav(-1)} style={{backgroundColor:'orange'}}>填写订单</NavBar>
       <div style={{backgroundColor:'#ffff',margin:'10px',height:'100px'}}>
          <p>余票紧张</p>
          <p><span style={{backgroundColor:'orange'}} >1程</span> 02月18日 | 北京南--济南西 | 二等座</p>
          <p><span style={{backgroundColor:'orange'}} >2程</span> 02月18日 | 济南西--上海 | 二等座（补票）</p>
       </div>
       <br />
       <div style={{backgroundColor:'#ffff',margin:'10px',height:'100px'}}>
        选择乘客
        {/* 1-3 完成添加乘车人，对添加信息进行验证(姓名、电话、身份证)，输入有问题有相应提示，完成后更新乘车人列表 */}
        <Card  style={{backgroundColor:'#f2f2f2f2',margin:'10px'}} >
        姓名：张三，
            身份证号:12345678910,
            手机号:1314567889
            <Button >成人</Button><Button>删除</Button>
        </Card>
        <Card  style={{backgroundColor:'#f2f2f2f2',margin:'10px'}}>
        姓名：李明，
            身份证号:1234564560,
            手机号:1314567777
            <Button>儿童</Button><Button>删除</Button>
        </Card>
        <Card  style={{backgroundColor:'#f2f2f2f2',margin:'10px'}}>
        姓名：莉莉，
            身份证号:1111111111,
            手机号:1311456666
            <Button>学生</Button>
            {/* 1-4 选中乘车人实现删除，先进行确认框提示，确定后实现删除，删除后更新列表 */}
            <Button
            style={{width:'70px',marginLeft:'400px',marginTop:'-45px'}}
            block
            onClick={() => {
              Dialog.alert({
                content: '你确定删除吗',
                closeOnMaskClick: true,
               onConfirm:()=>{
                nav('/cheng')
               }
              })
            }}
          >
        删除
          </Button>
         
        </Card>
       &emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
        <Button style={{backgroundColor:'orange'}} onClick={()=>nav('/zheng')}>+添加乘客（成人/学生/儿童）</Button>
       </div>
      
       <div style={{marginTop:'300px',marginLeft:'400px',backgroundColor:'white',width:'100%'}}>
           <span style={{color:'red'}}>￥0</span>
       <Button style={{backgroundColor:'red'}}>去支付</Button>
       </div>
    </div>
  )
}

export default Indexx
